<script lang="ts" setup>
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue'
import { RentBikeTablePageType, BikeType } from '@/types/enum'
import GoButton from '@/components/basic/GoButton.vue'
import RentBikeTable from '@/components/table/RentBikeTable.vue'
import { useTable } from '@/hooks/useTable'
import { queryShortBike } from '@/api/bike'
import { queryShortBikeCol } from '@/api/bike/types/bike'
import { getToken } from '@/utils/cache/cookies'
import { ElMessage, FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'
import { findStoreByName } from '@/api/store'
import { findStoreByNameResponseData } from '@/api/store/types/store'
defineOptions({
  name: 'TimeBikeList'
})
interface Form extends Record<string, any> {
  bikeCode: string
  bikeStatus: string
  lockStatus: string
  onlineStatus: string
  allowChangeBattery: string
  voltage: string
  minPower: number
  maxPower: number
  feeRule: string
  type: '0'
  storeId: ''
}
const form = reactive<Form>({
  bikeCode: '',
  bikeStatus: '',
  lockStatus: '',
  onlineStatus: '',
  allowChangeBattery: '',
  voltage: '',
  minPower: 0,
  maxPower: 100,
  feeRule: '',
  type: '0',
  storeId: ''
})
const formRef = ref<FormInstance | null>(null)
const state = ref<BikeType>(BikeType.All)
const { data, loading, pagination, load, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<queryShortBikeCol>(queryShortBike, getToken() ?? '', () => form)

const FilterTimeBikePopover = defineAsyncComponent(
  () => import('@/components/popover/FilterTimeBike.vue')
)
const FilterTimeBikePopoverRef = ref<InstanceType<typeof FilterTimeBikePopover> | null>(null)
onMounted(() => {
  getStore()
  load()
})
/** 判断是否查询了使用中门店 */
const isSearchStore = ref(false)
const onSubmit = async () => {
  // 提交表单的逻辑
  setCurrentPage(1)
  await load()
  state.value = form.bikeStatus === '1' ? BikeType.Rent : BikeType.All
  form.storeId !== '' && form.bikeStatus === '1'
    ? (isSearchStore.value = true)
    : (isSearchStore.value = false)
}
const onReset = () => {
  formRef.value?.resetFields()
  FilterTimeBikePopoverRef.value?.reset()
  form.maxPower = 100
  form.minPower = 0
}
const router = useRouter()
const bikeAMap = () => {
  if (pagination.total == 0) {
    ElMessage.error('暂无数据')
  }
  router.push({
    name: 'TimeBikeAMap',
    query: {
      storeId: form.storeId
    }
  })
}
const storeList = ref<findStoreByNameResponseData>([])
const getStore = () => {
  findStoreByName({
    token: getToken() ?? '',
    storeName: ''
  }).then((res) => {
    if (res.statusCode === '0') {
      storeList.value = res.data
    }
  })
}
/** 常规还车 */
const ReturnCarDialog = defineAsyncComponent(() => import('@/components/dialog/ReturnCar.vue'))
const ReturnCarDialogRef = ref<InstanceType<typeof ReturnCarDialog> | null>(null)
const openReturnCar = (id: string) => {
  ReturnCarDialogRef.value?.setId(id)
  ReturnCarDialogRef.value?.open()
}
</script>

<template>
  <div class="xy-container--split">
    <div class="xy-container__header">
      <el-form :model="form" ref="formRef" inline>
        <div flex flex-col flex-wrap>
          <div flex flex-wrap>
            <el-form-item label="车辆编号" prop="bikeCode" flex-1 items-center>
              <el-input v-model="form.bikeCode" placeholder="请输入车辆编号" />
            </el-form-item>
            <el-form-item label="开锁状态" prop="lockStatus" flex-1 items-center>
              <el-select v-model="form.lockStatus">
                <el-option label="开锁" value="0" />
                <el-option label="关锁" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="网络状态" prop="onlineStatus" flex-1 items-center>
              <el-select v-model="form.onlineStatus">
                <el-option label="联网" value="1" />
                <el-option label="断网" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="额定电压" prop="voltage" flex-1 items-center>
              <el-select v-model="form.voltage">
                <el-option label="48V" value="48V" />
                <el-option label="60V" value="60V" />
              </el-select>
            </el-form-item>
            <el-form-item label="免费换电" prop="lockStatus" flex-1 items-center>
              <el-select v-model="form.lockStatus">
                <el-option label="支持" value="1" />
                <el-option label="不支持" value="0" />
              </el-select>
            </el-form-item>
          </div>
          <div flex flex-wrap>
            <el-form-item label="计费规则" prop="feeRule" flex-1 items-center>
              <el-select v-model="form.feeRule">
                <el-option label="按时长" value="TimeBased" />
                <el-option label="按阶梯" value="Tiered" />
              </el-select>
            </el-form-item>
            <el-form-item label="车辆状态" prop="bikeStatus" flex-1 items-center>
              <el-select v-model="form.bikeStatus">
                <el-option label="空闲中" value="0" />
                <el-option label="使用中" value="1" />
                <el-option label="维修中" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="车辆电量" prop="lockStatus" flex-1 items-center>
              <el-input v-model="form.minPower" placeholder="最低电量" style="width: 50px" />
              <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
              <el-input v-model="form.maxPower" placeholder="最高电量" style="width: 50px" />
            </el-form-item>
            <el-form-item label="所属门店" prop="storeId" flex-1 items-center>
              <el-select v-model="form.storeId" placeholder="请选择所属门店" style="width: 150px">
                <el-option
                  v-for="item in storeList"
                  :key="item.storeId"
                  :value="item.storeId"
                  :label="item.storeName"
                />
              </el-select>
            </el-form-item>
            <el-form-item flex-1 items-center>
              <div flex items-center>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="onReset" mr-10>清空</el-button>
                <el-form-item flex-1 items-center>
                  <go-button icon-name="bike" @click="bikeAMap" />
                </el-form-item>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="xy-container__content" mt-20 pb-20>
      <rent-bike-table
        :data="data"
        @nomal-return-car="openReturnCar"
        @refresh="load"
        :type="state"
        :page="RentBikeTablePageType.TimeRent"
        :is-in-operators-info="false"
        :loading="loading"
        :is-search-store="isSearchStore"
      />
      <div flex justify-end mt-20>
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          background
          :total="pagination.total"
          layout="total,prev,pager,next,jumper,sizes"
        />
      </div>
    </div>
    <return-car-dialog ref="ReturnCarDialogRef" />
  </div>
</template>

<style scoped lang="scss">
.el-select {
  width: 120px;
}
.filter-time-bike_reference {
  background-color: var(--xy-primary-light-color);
  color: var(--xy-primary-color);
  border: transparent;
}
</style>
